import Axios, { AxiosError } from "axios";
import { useUserStore } from "@/store";
import { router } from "@/router";
import { ElMessage } from "element-plus";

const instance = Axios.create({
  baseURL: "http://xue.cnkdl.cn:9082/mall-admin/",
  timeout: 5000,
});

instance.interceptors.request.use(
  (config) => {
    // 需要在这进行请求拦截，添加 token
    let token = localStorage.getItem("token");
    if (token) {
      config.headers && (config.headers["Authorization"] = token);

      // config.headers = config.headers || { }
      // config.headers['Authorization'] = token;
    }
    return config;
  },
  (err) => Promise.reject(err)
);

// 现在需要在响应拦截里面统一处理 请求出错的情况
// 请求失败分两种：
// 1. 请求成功，业务失败  -- 响应状态码是200，业务状态是失败 ---> 响应拦截会走第一回调
// 2. 请求失败    响应状态码 不是200  ---> 响应拦截会走第二个回调
instance.interceptors.response.use(
  (res) => {
    const userStore = useUserStore();
    // 如果是登录过期， 请求还是成功的，只是 业务失败
    if (res.data.code === 401) {
      // 既然登录已经失效了，提示用户，把之前的用户相关的数据全清空
      // 删除token
      localStorage.removeItem("token");
      // 返回login
      router.push("/login");
      // 删除路由
      // 得到 pinia 里面的 一级菜单数组，数组里面的对象的 name 属性就是 对应的 路由的name
      userStore.activeMenus.forEach((item) => {
        router.removeRoute(item.name);
      });
      router.removeRoute("home");
      // 删除pinia里面的数据
      userStore.menus = [];
    }

    res.data.code !== 200 && ElMessage.error(res.data.message);

    return res.data;
  },
  (err: AxiosError) => {
    // console.log(err.);

    // 如果请求不是200，也需要在这进行处理
    ElMessage.error(`请求出问题了，请联系管理员,错误信息为：${err.message}`);
    // 在一些地方，记录一上你的报错 - 例如：localstorage 之类的 - 具体看你们自己的产品要求你们如何实现
    // 如果是请求失败，比如： 404 就 要在这处理
    return Promise.reject(err);
  }
);

export default instance;
